<!--
 * @Author: zhangduo 445629906@qq.com
 * @Date: 2023-12-12 15:41:19
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2023-12-12 16:48:15
 * @FilePath: \mdbj-ui\src\views\mypage\map\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by zhangduo, All Rights Reserved. 
-->
<template>
  <div>
    <div id="legendBtn" title="图例">
      <img
        src="../../../assets/icons/legend.png"
        style="width: 16px; height: 16px; margin: 12px"
        alt="图例"
      />
    </div>
    <div id="legendDiv" class="legend">
      <div class="legend-title">图例</div>
      <div class="legendContainer"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
#legendBtn {
  position: absolute;
  z-index: 99;
  left: 40px;
  bottom: 60px;
  width: 40px;
  height: 40px;
  border-radius: 30px;
  cursor: pointer;
  background-color: #287fe3;
}
#legendDiv {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 40px;
  bottom: 110px;
  z-index: 99;
}
.legend {
  width: 300px;
  height: 300px;
  background-color: #fff;
}
.legend-title {
  padding: 4px 9px;
  background-color: #288bef;
  color: #fff;
  font-size: 1.2em;
}
</style>
